<template>
  <div class="DcnBottom">
    <CodeCard v-bind="btnDesc">
      <div class="DcnDatePicker">
        <div class="block">
          <span class="demonstration">默认</span>
          <sdn-date-picker v-model="value1" type="date" placeholder="选择日期"></sdn-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">带快捷选项</span>
          <sdn-date-picker v-model="value2" align="right" type="date" placeholder="选择日期"
                         :picker-options="pickerOptions"></sdn-date-picker>
        </div>
      </div>

    </CodeCard>
  </div>
</template>

<script>

import {ref} from 'vue'

export default {
  components: {
    
  },
  setup() {
    const pickerOptions = {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date());
        }
      }, {
        text: '昨天',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit('pick', date);
        }
      }, {
        text: '一周前',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', date);
        }
      }]
    }
    let value1 = ref('')
    let value2 = ref('')

    let btnDesc = {
      title: "DatePicker 日期选择器",
      describe: "用于选择或输入日期",
      codeBlock: `<div class="DcnDatePicker">
        <div class="block">
          <span class="demonstration">默认</span>
          <sdn-date-picker v-model="value1" type="date" placeholder="选择日期"></sdn-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">带快捷选项</span>
          <sdn-date-picker v-model="value2" align="right" type="date" placeholder="选择日期"
                         :picker-options="pickerOptions"></sdn-date-picker>
        </div>
      </div>`,
      attrs: [
        {
          "name": "value / v-model",
          "describe": "绑定值",
          "type": "date(DatePicker) / array(DateRangePicker)",
          "emun": "—",
          "default": "—"
        }, {
          "name": "readonly",
          "describe": "完全只读",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "disabled",
          "describe": "禁用",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "editable",
          "describe": "文本框可输入",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "clearable",
          "describe": "是否显示清除按钮",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "size",
          "describe": "输入框尺寸",
          "type": "string",
          "emun": "large, small, mini",
          "default": "—"
        }, {
          "name": "placeholder",
          "describe": "非范围选择时的占位内容",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "start-placeholder",
          "describe": "范围选择时开始日期的占位内容",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "end-placeholder",
          "describe": "范围选择时结束日期的占位内容",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "type",
          "describe": "显示类型",
          "type": "string",
          "emun": "year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange",
          "default": "date"
        }, {
          "name": "format",
          "describe": "显示在输入框中的格式",
          "type": "string",
          "emun": "见日期格式",
          "default": "yyyy-MM-dd"
        }, {
          "name": "align",
          "describe": "对齐方式",
          "type": "string",
          "emun": "left, center, right",
          "default": "left"
        }, {
          "name": "popper-class",
          "describe": "DatePicker 下拉框的类名",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "picker-options",
          "describe": "当前时间日期选择器特有的选项参考下表",
          "type": "object",
          "emun": "—",
          "default": "{}"
        }, {
          "name": "range-separator",
          "describe": "选择范围时的分隔符",
          "type": "string",
          "emun": "—",
          "default": "'-'"
        }, {
          "name": "default-value",
          "describe": "可选，选择器打开时默认显示的时间",
          "type": "Date",
          "emun": "可被new Date()解析",
          "default": "—"
        }, {
          "name": "default-time",
          "describe": "范围选择时选中日期所使用的当日内具体时刻",
          "type": "string[]",
          "emun": "数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00",
          "default": "—"
        }, {
          "name": "value-format",
          "describe": "可选，绑定值的格式。不指定则绑定值为 Date 对象",
          "type": "string",
          "emun": "见日期格式",
          "default": "—"
        }, {
          "name": "name",
          "describe": "原生属性",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "unlink-panels",
          "describe": "在范围选择器里取消两个日期面板之间的联动",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "prefix-icon",
          "describe": "自定义头部图标的类名",
          "type": "string",
          "emun": "—",
          "default": "el-icon-date"
        }, {
          "name": "clear-icon",
          "describe": "自定义清空图标的类名",
          "type": "string",
          "emun": "—",
          "default": "el-icon-circle-close"
        }, {
          "name": "validate-event",
          "describe": "输入时是否触发表单的校验",
          "type": "boolean",
          "emun": "-",
          "default": "TRUE"
        }, {
          "name": "append-to-body",
          "describe": "DetePicker 自身是否插入至 body 元素上。",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE"
        }],
      events: [
        {"name": "change", "describe": "用户确认选定的值时触发", "params": "组件绑定值。格式与绑定值一致，可受 value-format 控制"}, {
          "name": "blur",
          "describe": "当 input 失去焦点时触发",
          "params": "组件实例"
        }, {"name": "focus", "describe": "当 input 获得焦点时触发", "params": "组件实例"}],
      methods: [
        {"name": "focus", "describe": "使 input 获取焦点", "params": "—"}],
      slots: []
    };
    return {
      btnDesc,
      pickerOptions,
      value1,
      value2
    };
  },
};
</script>

<style lang="stylus">
.DcnBottom {
  .DcnDatePicker {
    display flex
    justify-content space-around

    .block {
      display flex
      justify-content center
      align-items center
      flex-direction column
      margin-bottom 0.2rem

      .demonstration {
        padding-bottom 0.2rem
        color #666666
      }
    }
  }

}
</style>
